
import type { useGoodStore } from '@/stores/counter';
<template>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="客户姓名" prop="name">
        <el-input v-model="ruleForm.customerName" />
      </el-form-item>
      <el-form-item label="客户手机号" prop="name">
        <el-input v-model="ruleForm.phone" />
      </el-form-item>
      <el-form-item label="金额" prop="name">
        <el-input v-model="ruleForm.amount" />
      </el-form-item>
      <el-form-item label="入店日期" prop="name">
        <el-input v-model="ruleForm.checkInDate" type="date" />
      </el-form-item>
      <el-form-item label="离店日期" prop="name">
        <el-input v-model="ruleForm.checkOutDate"  type="date"  />
      </el-form-item>
      <el-form-item label="备注" prop="name">
        <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
      />
      <Editor
        style="height: 500px; overflow-y: hidden;"
        v-model="ruleForm.remark"
        :defaultConfig="editorConfig"
        @onCreated="handleCreated"
      />
    </div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          Create
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue'
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
  import {useGoodStore} from '@/stores/counter'
  const useStore=useGoodStore();
  import { ElMessage,ElMessageBox  } from 'element-plus'
  import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, shallowRef } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import axios from 'axios'
import moment from 'moment';


  // 编辑器实例，必须用 shallowRef
  const editorRef = shallowRef()

const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...',maxLength:1000 }

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor:any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

  
  interface RuleForm {
    orderId: number,
        customerName: string,
        phone: string,
        amount: number,
        checkInDate: Date|null,
        checkOutDate: Date|null,
        remark: string,
  }
  
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = ref<RuleForm>({
    orderId: 0,
        customerName: "",
        phone: "",
        amount: 0,
        checkInDate: null,
        checkOutDate:  null,
        remark: ""
  })
  
  const locationOptions = ['Home', 'Company', 'School']
  
  const rules = reactive<FormRules<RuleForm>>({})
  
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        ruleForm.value.orderId=useStore.oid;
       axios.put('/api/Order/OrderUp',ruleForm.value)
       .then(res=>{
        if(res.data.isSuc)
        {
            ElMessage.success(res.data.msg);
        }
        else
        {
            ElMessage.error(res.data.msg);
        }
       })

      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  onMounted(()=>{
    loadData();
  })
  const loadData=()=>{
    axios.get('/api/Order/OrderBack',{
        params:{
            oid:useStore.oid
        }
    })
    .then(res=>{
        ruleForm.value=res.data.data;
        ruleForm.value.checkInDate=res.data.data.checkInDate.substring(0,10);
        ruleForm.value.checkOutDate=res.data.data.checkOutDate.substring(0,10);
    })
  }

  </script>
  